<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aspect Ratio Example</title>

    <!-- aspect-ratio 指定了一个比例，浏览器会根据这个比例自动计算元素的高度或宽度。即： -->
    <!-- 如果你指定了宽度，那么高度会根据宽度和 aspect-ratio 计算得出。 -->
    <!-- 如果你指定了高度，那么宽度会根据高度和 aspect-ratio 计算得出。 -->

    <style>
        .container {
            width: 300px;
            aspect-ratio: 16 / 9;
            /* 设置宽高比为16:9 */
            background-color: lightblue;
        }
    </style>
</head>

<body>
    <p>aspect-ratio 是 CSS 中用于控制元素宽高比的属性。</p>
    <div class="container">
        This div maintains a 16:9 aspect ratio.
    </div>
</body>

</html>